import Taro from '@tarojs/taro';
import React, { memo, Component } from "react";
// import { Document, Page } from 'react-pdf';
// import pdfjs from 'pdfjs-dist';
// import pdfjsLib from '@/components/pdfjs-3.9.179-legacy-dist/build/pdf'

import { View } from '@tarojs/components';
import apiConfig from '@/services/apiConfig'
// import { PDFtoIMG } from 'react-pdf-to-image';
import './index.scss'
// import { pdf } from '@react-pdf/renderer';

interface PDFViewerProps {
  name: string,
  url: string,
}

export class PDFViewer extends Component<PDFViewerProps, any> {

  config = {
    navigationBarTitleText: ''
  }

  static defaultProps = {
    name: "",
    url: ''
  }

  constructor(props) {
    super(props);
  }

  state = {
    pdfUrl: '',
  }

  componentWillMount() {

    let authToken = Taro.getStorageSync('auth-token') || ''//拿到本地缓存中存的token
    let orgTag = apiConfig.orgTag//拿到本地缓存中存的token
    var header = {
      'auth-token': authToken, //将token添加到头部
      'org-tag': orgTag
    }

    //下载文件
    const url = this.props.url;
    console.log(url);
    if (url) {
      Taro.downloadFile({
        url: apiConfig.baseUrl + '/api/v1/' + url,
        header: header,
        success: (res) => {
          if (res.statusCode === 200) {
            const filePath = res.tempFilePath;
            console.log(filePath);
            Taro.saveFile({
              tempFilePath: filePath,
              success: (result) => {
                const savedFilePath = result.savedFilePath;
                console.log(savedFilePath);
                this.setState({ pdfUrl: savedFilePath })
                this.canvasPdfToImage(savedFilePath);
              },
            });
          }
        },
        fail: (err) => {
          console.log('失败', err);
        },
      });
    }
  }

  canvasPdfToImage(pdfPath) {
    // // 使用pdfjs库加载PDF文件
    console.log(pdfPath)
    // pdfjsLib.getDocument(pdfPath).promise.then((pdf) => {
    //   console.log("asss");
    //   console.log(pdf);
    //   const numPages = pdf.numPages;

    //   // 渲染每个页面为图像
    //   for (let pageNum = 1; pageNum <= numPages; pageNum++) {
    //     pdf.getPage(pageNum).then((page) => {
    //       const scale = 1.5; // 图像缩放比例，可以根据需要进行调整
    //       const viewport = page.getViewport({ scale });
    //       const canvas = document.createElement('canvas');
    //       const context = canvas.getContext('2d');

    //       canvas.width = viewport.width;
    //       canvas.height = viewport.height;

    //       const renderContext = {
    //         canvasContext: context,
    //         viewport: viewport,
    //       };

    //       // 将PDF页面渲染为图像
    //       page.render(renderContext).promise.then(() => {
    //         // 将图像保存为DataURL或进行其他操作
    //         const imageDataURL = canvas.toDataURL('image/jpeg');
    //         console.log(imageDataURL);
    //       });
    //     });
    //   }
    // });
  }

  onDocumentLoadSuccess({ numPages }) {
    // setNumPages(numPages);
  }

  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) {

  }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }
  render() {
    const { pdfUrl } = this.state;
    var pdfUrl1 = 'https://taro-docs.jd.com/docs/';
    return (

      <View className="pdf-viewer">

        {/* <PDFtoIMG file={pdfUrl}>
          {({ pages }) => {
            if (!pages.length) return 'Loading...';
            return pages.map((page, index) =>
              <img key={index} src={page} />
            );
          }}
        </PDFtoIMG> */}


      </View >
    );
  }
}


export default memo(PDFViewer);